<template>
  <view class="container">
    <view class="list">
      <view class="article" v-for="(item, index) in list" :key="index" @click="articleDetail(item.id)">
        <view class="left">
          <view class="title">{{ item.title }}</view>
          <view class="info">
            <view class="time">{{ item.create_time }}</view>
            <view class="read">浏览：{{ item.look_count }}</view>
          </view>
        </view>
        <image :src="item.img" mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      pagesize: 10
    };
  },

  onLoad: function () {
    this.articleList();
  },

  onReachBottom() {
    this.articleList(this.page + 1);
  },

  onPullDownRefresh() {
    this.page = 1;
    this.articleList();
  },

  methods: {
    articleList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/articleList', {
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
            uni.stopPullDownRefresh();
          }, 500)
        } else {
          uni.hideLoading();
          if (page == 1) {
            this.list = [];
          } else {
            this.$common.doErrorResult(res);
          }
        }
      })
    },

    articleDetail: function (id) {
      uni.navigateTo({
        url: '/pages/article/article?id=' + id
      })
    },
  },
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;

  .list {
    width: 100%;

    .article {
      background: #fff;
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      border-radius: 20rpx;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .left {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          // 最多显示两行，超出显示省略号
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info {
          display: flex;
          justify-content: space-between;

          .time {
            font-size: 24rpx;
            color: $main-blank;
          }

          .read {
            font-size: 24rpx;
          }
        }
      }

      image {
        width: 230rpx;
        height: 150rpx;
        border-radius: 20rpx;
        margin-left: 30rpx;
        flex-shrink: 0; // 防止被挤压
      }
    }
  }
}
</style>

